<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <script type="text/javascript" src="/layui/layui.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link type="text/css" rel="stylesheet" href="/layui/css/layui.css">
    <script>
        var layer;
        layui.use('layer', function(){
            layer = layui.layer;
        });
        function openAdd() {
            layer.open({
                type: 2,
                area: ['500px', '350px'],
                content: '/page/user-add.html'
            });
        }
        function deleteUser(id){
            if(confirm("是否删除？"))
                axios.delete("/user/"+id).
                then(function (value) {
                    location.reload();
                })
        }
    </script>
</head>
<body>
    <div id="app">
    <button class="layui-btn layui-btn-normal" onclick="openAdd()">添加用户</button>
    <table class="layui-table">
        <thead>
            <tr>
                <th>编号</th>
                <th>账号</th>
                <th>密码</th>
                <th>类型</th>
                <th>图片</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="user in users">
                <td>{{user.userId}}</td>
                <td>{{user.userName}}</td>
                <td>{{user.userPwd}}</td>
                <td>{{user.userType}}</td>
                <td>
                    <img v-bind:src="user.userImg">
                </td>
            </tr>
        </tbody>
    </table>
    </div>
<script>
    new Vue({
       el:"#app",
       data(){
           return {
               //后台的用户列表
               users:[]
           }
       },
        //Vue挂载完成
        mounted(){
           //请求后台的/users接口
            axios.get("/users?current=1")
                .then(value => {
                    //将后台的数据绑定到users上
                    this.users = value.data.data.records;
                })
        }
    });
</script>
</body>
</html>